<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级考勤管理</title>
    <!-- 引入jQuery -->
    <script src="/static/jquery/jquery.min.js"></script>
    <!-- Bootstrap CSS -->
    <link href="/static/bootstrap/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Vue.js -->
    <script src="/static/vue/vue.min.js"></script>
    <!-- 引入 Axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        /* 自定义按钮样式 */
        .btn-attendance {
            width: 100%; /* 按钮宽度占满单元格 */
            background-color: #f8f9fa; /* 默认灰色 */
            border: 1px solid #ddd;
            color: #333;
            padding: 5px; /* 内边距 */
            transition: background-color 0.3s ease; /* 背景色过渡效果 */
        }
        .btn-attendance.selected {
            background-color: #007bff; /* 选中时蓝色 */
            color: white;
        }
        /* 表格样式 */
        .attendance-table {
            width: 100%;
            border-collapse: collapse; /* 合并边框 */
            margin-bottom: 20px; /* 底部间距 */
        }
        .attendance-table td {
            padding: 5px; /* 单元格内边距 */
            border: 1px solid #ddd; /* 单元格边框 */
            text-align: center; /* 内容居中 */
        }
        /* 表单控件间距 */
        .form-group {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div id="app" class="container mt-5">
        <!-- 标题 -->
        <h1 class="mb-4">班级考勤管理</h1>

        <!-- 考勤时间选择 -->
        <div class="form-group">
            <label for="datePicker">考勤时间：</label>
            <input
                type="date"
                id="datePicker"
                class="form-control"
                v-model="attendanceTime"
            >
        </div>

        <!-- 考勤项目选择 -->
        <div class="form-group">
            <label>考勤项目：</label>
            <div>
                <div class="form-check form-check-inline">
                    <input
                        type="radio"
                        id="morningRollCall"
                        class="form-check-input"
                        value="早点名"
                        v-model="attendanceType"
                    >
                    <label for="morningRollCall" class="form-check-label">早点名</label>
                </div>
                <div class="form-check form-check-inline">
                    <input
                        type="radio"
                        id="exercise"
                        class="form-check-input"
                        value="课间操"
                        v-model="attendanceType"
                    >
                    <label for="exercise" class="form-check-label">课间操</label>
                </div>
                <div class="form-check form-check-inline">
                    <input
                        type="radio"
                        id="eveningRollCall"
                        class="form-check-input"
                        value="放学点名"
                        v-model="attendanceType"
                    >
                    <label for="eveningRollCall" class="form-check-label">放学点名</label>
                </div>
                <div class="form-check form-check-inline">
                    <input
                        type="radio"
                        id="phoneNotSubmitted"
                        class="form-check-input"
                        value="手机未交"
                        v-model="attendanceType"
                    >
                    <label for="phoneNotSubmitted" class="form-check-label">手机未交</label>
                </div>
            </div>
        </div>

        <!-- 出勤或缺勤选择 -->
        <div class="form-group">
            <label>考勤状态：</label>
            <div>
                <div class="form-check form-check-inline">
                    <input
                        type="radio"
                        id="present"
                        class="form-check-input"
                        value="出勤"
                        v-model="attendanceStatus"
                    >
                    <label for="present" class="form-check-label">出勤</label>
                </div>
                <div class="form-check form-check-inline">
                    <input
                        type="radio"
                        id="absent"
                        class="form-check-input"
                        value="缺勤"
                        v-model="attendanceStatus"
                    >
                    <label for="absent" class="form-check-label">缺勤</label>
                </div>
            </div>
        </div>

        <!-- 班级成员表格 -->
        <table class="attendance-table">
            <tr v-for="(row, rowIndex) in memberRows" :key="rowIndex">
                <td v-for="(member, colIndex) in row" :key="member.id">
                    <button
                        @click="toggleAttendance(member)"
                        :class="['btn', 'btn-attendance', { selected: member.absent }]"
                    >
                        {{ member.name }}
                    </button>
                </td>
            </tr>
        </table>

        <!-- 提交按钮 -->
        <button @click="submitAttendance" class="btn btn-primary">提交</button>

        <!-- 提交结果提示 -->
        <div v-if="submitMessage" class="alert alert-info mt-4">
            {{ submitMessage }}
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    // 班级成员数据
                    members: [
                        { id: 1, name: '雷健', absent: false },
                        { id: 2, name: '陈嘉乐', absent: false },
                        { id: 3, name: '于天龙', absent: false },
                        { id: 4, name: '欧子畅', absent: false },
                        { id: 5, name: '李玮奇', absent: false },
                        { id: 6, name: '查俊杰', absent: false },
                        { id: 7, name: '邹志炜', absent: false },
                        { id: 8, name: '江昊冉', absent: false },
                        { id: 9, name: '雍清翔', absent: false },
                        { id: 10, name: '唐睿涵', absent: false },
                        { id: 11, name: '陆风和', absent: false },
                        { id: 12, name: '李鸿杰', absent: false },
                        { id: 13, name: '郁辰旷', absent: false },
                        { id: 14, name: '何天成', absent: false },
                        { id: 15, name: '贺鑫晨', absent: false },
                        { id: 16, name: '吕王宸', absent: false },
                        { id: 17, name: '章立成', absent: false },
                        { id: 18, name: '陈烨', absent: false },
                        { id: 19, name: '邓英杰', absent: false },
                        { id: 20, name: '胡奕翔', absent: false },
                        { id: 21, name: '钱威霖', absent: false },
                        { id: 22, name: '李承渝', absent: false },
                        { id: 23, name: '倪寅', absent: false },
                        { id: 24, name: '仇宗强', absent: false },
                        { id: 25, name: '杨乾隆', absent: false },
                        { id: 26, name: '王禹熙', absent: false },
                        { id: 27, name: '许锦华', absent: false },
                        { id: 28, name: '李韦辰', absent: false },
                        { id: 29, name: '缪润哲', absent: false },
                        { id: 30, name: '濮薪茹', absent: false },
                        { id: 31, name: '麻雨婷', absent: false },
                        { id: 32, name: '李欣怡', absent: false },
                        { id: 33, name: '黄心茹', absent: false },
                        { id: 34, name: '贾睿曦', absent: false },
                        { id: 35, name: '朱元婷', absent: false },
                        { id: 36, name: '邹佳琪', absent: false },
                        { id: 37, name: '郁雪怡', absent: false }
                    ],
                    attendanceTime: new Date().toISOString().split('T')[0], // 默认当前日期
                    attendanceType: '早点名', // 默认考勤项目
                    attendanceStatus: '缺勤', // 默认考勤状态
                    submitMessage: '' // 提交结果提示
                };
            },
            computed: {
                // 将成员数据按每行 4 个分组
                memberRows() {
                    const rows = [];
                    for (let i = 0; i < this.members.length; i += 4) {
                        rows.push(this.members.slice(i, i + 4));
                    }
                    return rows;
                }
            },
            methods: {
                // 切换考勤状态
                toggleAttendance(member) {
                    member.absent = !member.absent; // 切换选中状态
                },

                // 提交考勤数据
                submitAttendance() {
    // 获取缺勤人员名单
    const absentMembers = this.members
        .filter(member => member.absent)
        .map(member => member.name);

    // 构造JSON数据
    const jsonData = {
        date: this.attendanceTime,
        attendanceType: this.attendanceType,
        attendanceStatus: this.attendanceStatus,
        absentMembers: absentMembers
    };

    // 使用fetch发送请求
    fetch('http://127.0.0.1:5000/api/submit_attendance', {
        method: 'POST',
        mode: 'cors',  // 强制CORS模式
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(jsonData),
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(responseData => {
        let type = '';
        let absent_stu = '';

        if (responseData.data.morning_absent) {
            type = "早点名缺勤";
            absent_stu = responseData.data.morning_absent;
        }
        if (responseData.data.exercise_absent) {
            type = "课间操缺勤";
            absent_stu = responseData.data.exercise_absent;
        }
        if (responseData.data.school_over_absent) {
            type = "放学缺勤";
            absent_stu = responseData.data.school_over_absent;
        }
        if (responseData.data.phone_absent) {
            type = "手机未交";
            absent_stu = responseData.data.phone_absent;
        }

        this.submitMessage = `${responseData.message}：
            ${responseData.data.date}，
            项目：${type}，
            缺勤人员：${absent_stu || '无'}`;
    })
    .catch(error => {
        this.submitMessage = '提交失败，请重试。';
        console.error('提交失败：', error);
        
        // 特殊处理CORS错误
        if (error.message.includes('Failed to fetch')) {
            console.error('可能是网络或CORS问题');
        } else {
            console.error('错误详情:', error.message);
        }
    });
},
                
            }
        });
    </script>
</body>
</html>